<script setup lang="ts">
import { ref } from "vue";
import { invoke } from "@tauri-apps/api/core";
import type { ApiResponse } from "../types";

const inputBase64 = ref<string>('');
const outputBase64 = ref<string>('');

const encodeBase64 = async () => {
  try {
    const response = await invoke<ApiResponse>("encode_base64", {
      input: inputBase64.value
    });
    
    if (response.success) {
      outputBase64.value = response.result;
    } else {
      outputBase64.value = `错误：${response.error}`;
    }
  } catch (error) {
    outputBase64.value = `错误：${error}`;
  }
};

const decodeBase64 = async () => {
  try {
    const response = await invoke<ApiResponse>("decode_base64", {
      input: inputBase64.value
    });
    
    if (response.success) {
      outputBase64.value = response.result;
    } else {
      outputBase64.value = `错误：${response.error}`;
    }
  } catch (error) {
    outputBase64.value = `错误：${error}`;
  }
};
</script>

<template>
  <div>
    <h1 class="module-title">Base64 编解码工具</h1>
    <div class="input-section">
      <textarea
        v-model="inputBase64"
        placeholder="请输入需要编解码的文本..."
        class="text-input"
      ></textarea>
    </div>
    <div class="button-section">
      <button @click="encodeBase64" class="format-button">编码</button>
      <button @click="decodeBase64" class="format-button">解码</button>
    </div>
    <div class="output-section">
      <textarea
        v-model="outputBase64"
        placeholder="编解码结果将显示在这里..."
        class="text-output"
        readonly
      ></textarea>
    </div>
  </div>
</template>

<style scoped>
.module-title {
  font-size: 18px;
  font-weight: 500;
  color: #2c3e50;
  margin-bottom: 12px;
}

.input-section, .output-section {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  height: 100%;
}

.text-input, .text-output {
  width: 100%;
  height: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
  font-size: 12px;
  line-height: 1.4;
  resize: none;
  background-color: #ffffff;
  flex: 1;
  min-height: 0;
}

.button-section {
  margin: 8px 0;
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-shrink: 0;
}

.format-button {
  background-color: #4CAF50;
  color: white;
  padding: 6px 16px;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.3s;
}

@media (prefers-color-scheme: dark) {
  .text-input, .text-output {
    background-color: #2d2d2d;
    color: #ffffff;
    border-color: #404040;
  }

  .module-title {
    color: #ecf0f1;
  }
}
</style> 